<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日微醺吧 - 我的</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f7f7f7;
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .profile-header {
            background: linear-gradient(135deg, #5b86e5, #36d1dc);
            padding: 20px;
            color: white;
            border-radius: 0 0 20px 20px;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .menu-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f8ff;
            border-radius: 10px;
            margin-right: 15px;
            color: #5b86e5;
        }
        
        .section-card {
            background-color: white;
            border-radius: 15px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .badge {
            background-color: #07c160;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <h1 class="text-lg font-medium">我的</h1>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 个人信息头部 -->
        <div class="profile-header mb-5">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" 
                     alt="用户头像" class="avatar mr-4">
                <div>
                    <h2 class="text-xl font-bold mb-1">微醺用户</h2>
                    <p class="text-sm opacity-90">微醺爱好者 · 鸡尾酒新手</p>
                </div>
            </div>
            
            <div class="flex justify-between mt-5">
                <div class="text-center">
                    <p class="text-xl font-bold">15</p>
                    <p class="text-sm opacity-90">收藏特调</p>
                </div>
                <div class="text-center">
                    <p class="text-xl font-bold">8</p>
                    <p class="text-sm opacity-90">创建特调</p>
                </div>
                <div class="text-center">
                    <p class="text-xl font-bold">3</p>
                    <p class="text-sm opacity-90">分享次数</p>
                </div>
            </div>
        </div>
        
        <!-- 功能菜单区域 -->
        <div class="px-4">
            <!-- 我的特调 -->
            <div class="section-card">
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-glass-martini-alt"></i>
                    </div>
                    <div class="flex-1">
                        <span>我的特调</span>
                        <span class="badge">2 新</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="flex-1">
                        <span>我的收藏</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="flex-1">
                        <span>浏览历史</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
            
            <!-- 酒吧服务 -->
            <div class="section-card">
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-store"></i>
                    </div>
                    <div class="flex-1">
                        <span>线下酒吧</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="flex-1">
                        <span>调酒工具</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-store-alt"></i>
                    </div>
                    <div class="flex-1">
                        <span>香水店铺</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
            
            <!-- 其他设置 -->
            <div class="section-card">
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="flex-1">
                        <span>设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="flex-1">
                        <span>帮助与反馈</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="flex-1">
                        <span>关于我们</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="fas fa-home tab-icon"></i>
            <span>首页</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-glass-cheers tab-icon"></i>
            <span>制作特调</span>
        </div>
        <div class="tab-item active">
            <i class="fas fa-user tab-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 